<template>
    <div class="article-manager video-icon form-submit" id="shopp-manager">
       <div class="i-layout-page-header">
           <PageHeader class="product_tabs" hidden-breadcrumb>
               <div slot="title" class="acea-row row-middle">
               <router-link :to="{ path: `${roterPre}/marketing/cases` }">
                   <div class="font-sm after-line">
                   <span class="iconfont iconfanhui"></span>
                   <span class="pl10">返回</span>
                   </div>
               </router-link>
               <span v-text="$route.params.id ? '编辑案例' : '添加案例'" class="mr20 ml16"></span>
               </div>
           </PageHeader>
       </div>
       <Card :bordered="false" dis-hover class="ivu-mt mh">
           <div class="new_tab">
               <Tabs v-model="currentTab" @on-click="onhangeTab">
               <TabPane
                   v-for="(item, index) in headTab"
                   :key="index+'name'"
                   :label="item.title"
                   :name="item.name"
               ></TabPane>
               </Tabs>
           </div>
           <Form
               class="formValidate mt20"
               ref="formValidate"
               :rules="ruleValidate"
               :model="formValidate"
               :label-width="labelWidth"
               :label-position="labelPosition"
               @submit.native.prevent
               >
               <Row :gutter="24" type="flex" v-show="currentTab === '1'">
                   <Col span="24">
                       <FormItem label="案例标题：" prop="title">
                       <Input
                           v-model="formValidate.title"
                           placeholder="请输入案例标题"
                           v-width="'50%'"
                       />
                       </FormItem>
                   </Col>
                   <Col span="24">
                       <FormItem label="案例描述" prop="description">
                       <Input
                           v-model="formValidate.description"
                           type="textarea"
                           :rows="3"
                           placeholder="请输入案例描述"
                           v-width="'50%'"
                       />
                       </FormItem>
                   </Col>
                   <Col span="24">
                       <FormItem label="封面图片"  prop="cover_image">
                           <div class="acea-row">
                               <div
                                   v-if="formValidate.cover_image"
                                   class="pictrue"
                               >
                               <img v-lazy="formValidate.cover_image" />
                               <Button
                                   shape="circle"
                                   icon="md-close"
                                   @click.native="formValidate.cover_image = ''"
                                   class="btndel"
                               ></Button>
                               </div>
                               <div
                                   v-else
                                   class="upLoad acea-row row-center-wrapper"
                                   @click="modalPicTap('dan', 'cover_image')"
                               >
                               <Icon type="ios-camera-outline" size="26" />
                               </div>
                               <Input
                                   v-model="formValidate.cover_image"
                                   class="input-display"
                               ></Input>
                           </div>
                       </FormItem>
                   </Col>
                   <Col span="24">
                       <FormItem label="分享图片">
                           <div class="acea-row">
                               <div
                                   v-if="formValidate.share_img"
                                   class="pictrue"
                               >
                               <img v-lazy="formValidate.share_img" />
                               <Button
                                   shape="circle"
                                   icon="md-close"
                                   @click.native="formValidate.share_img = ''"
                                   class="btndel"
                               ></Button>
                               </div>
                               <div
                                   v-else
                                   class="upLoad acea-row row-center-wrapper"
                                   @click="modalPicTap('dan', 'share_img')"
                               >
                               <Icon type="ios-camera-outline" size="26" />
                               </div>
                               <Input
                                   v-model="formValidate.share_img"
                                   class="input-display"
                               ></Input>
                           </div>
                       </FormItem>
                   </Col>
                   <Col span="24">
                       <FormItem label="案例多图：" prop="carousel_images">
                       <div class="acea-row">
                           <div
                               class="pictrue"
                               v-for="(item, index) in formValidate.carousel_images"
                               :key="index+'img'"
                               draggable="true"
                               @dragstart="handleDragStart($event, item)"
                               @dragover.prevent="handleDragOver($event, item)"
                               @dragenter="handleDragEnter($event, item)"
                               @dragend="handleDragEnd($event, item)"
                           >
                           <img v-lazy="item" />
                           <Button
                               shape="circle"
                               icon="md-close"
                               @click.native="handleRemove(index)"
                               class="btndel"
                           ></Button>
                           </div>
                           <div
                               v-if="formValidate.carousel_images.length < 10"
                               class="upLoad acea-row row-center-wrapper"
                               @click="modalPicTap('duo')"
                           >
                           <Icon type="ios-camera-outline" size="26" />
                           </div>
                           <Input
                               v-model="formValidate.carousel_images[0]"
                               class="input-display"
                           ></Input>
                       </div>
                       <div class="tips"> 默认首张图为主图，最多上传10张</div>
                       </FormItem>
                   </Col>
                   <Col span="24">
                       <FormItem label="添加视频：">
                       <i-switch v-model="formValidate.is_video"  :true-value="1" :false-value="0" size="large">
                           <span slot="open">开启</span>
                           <span slot="close">关闭</span>
                       </i-switch>
                       </FormItem>
                   </Col>
                   <Col span="24" v-if="formValidate.is_video">
                       <FormItem label="上传视频：" prop="video_url">
                       <Button @click="modalPicTap('dan','video')">上传视频</Button>
                       <div class="iview-video-style" v-if="formValidate.video_url">
                           <video
                               class="video-style"
                               :src="formValidate.video_url"
                               controls="controls"
                           >
                           </video>
                           <div class="mark"></div>
                           <Icon
                               type="ios-trash-outline"
                               class="iconv"
                               @click="delVideo"
                           />
                       </div>
                       </FormItem>
                   </Col>
                   <Col span="24">
                       <FormItem label="婚礼地址：" prop="address">
                       <Input
                           v-model="formValidate.address"
                           placeholder="请输入婚礼地址："
                           v-width="'50%'"
                       />
                       </FormItem>
                   </Col>
                   <Col span="24">
                       <FormItem label="婚礼日期：" prop="wedding_date">
                       <div class="acea-row row-middle">
                           <DatePicker :editable="false" type="date" format="yyyy-MM-dd" placeholder="请选择婚礼日期"
                                       @on-change="onchangeTime" class="w_input" :value="formValidate.wedding_date"
                                       v-model="formValidate.wedding_date"></DatePicker>
                       </div>
                       </FormItem>
                   </Col>
                   <Col span="24">
                       <FormItem label="总花费：" prop="total_price">
                       <Input
                           v-model="formValidate.total_price"
                           placeholder="请输入婚礼总花费："
                           v-width="'50%'"
                       />
                       </FormItem>
                   </Col>
                   <Col span="24">
                       <FormItem label="详细地址：" prop="selectAddress">
                           <Cascader   placeholder="请输入详细地址："
                           v-width="'50%'" v-model="formValidate.selectAddress" :data="addresData" :load-data="loadData" @on-change="addchack"></Cascader>
                       </FormItem>
                   </Col>
                   <Col span="6">
                       <FormItem label="风格：" prop="style_id">
                       <Select
                           v-model="formValidate.style_id"
                           clearable
                           filterable
                        
                           placeholder="请选择风格"
                       >
                           <Option v-for="(item, index) in wedding_style_list" :value="item.id" :key="item.id">{{ item.name }}</Option>
                       </Select>
                       </FormItem>
                   </Col>
                   <Col span="24">
                       <Col span="6">
                           <FormItem label="环境：" prop="env_id">
                           <Select
                               v-model="formValidate.env_id"
                               clearable
                               filterable
                               
                               placeholder="请选择环境"
                           >
                               <Option
                                   v-for="(item, index) in wedding_env_list"
                                   :value="item.id"
                                   :key="item.id"
                               >{{ item.name }}</Option
                               >
                           </Select>
                           </FormItem>
                       </Col>
                          
                       <Col span="6">
                           <FormItem label="价格：" prop="price_id">
                           <Select
                               v-model="formValidate.price_id"
                               clearable
                               filterable
                               placeholder="请选择价格区间"
                           >
                               <Option
                                   v-for="(item, index) in wedding_price_list"
                                   :value="item.id"
                                   :key="item.id"
                               >{{ item.name }}</Option
                               >
                           </Select>
                           </FormItem>
                       </Col>
                       
                       <Col span="6">
                           <FormItem label="颜色：" prop="color_id">
                           <Select
                               v-model="formValidate.color_id"
                               clearable
                               filterable
                               multiple  
                               @on-select="select_color"

                               placeholder="请选择颜色主题"
                           >
                               <Option     :label="item.name" :style="{ backgroundColor: item.name }" v-for="(item, index) in wedding_color_list" :value="item.id" :key="item.id">  <span :style="{ backgroundColor: item.name }" >{{ item.name }} </span> 
                               </Option>
                           </Select>
                           <div class="tips" style="display:flex;margin-top:10px" v-if="formValidate.color.length >0">
                               <div  v-for="item in formValidate.color" :key="item.id" style="width:20px;height:20px;border-radius:50%;margin-right:10px;" :style="{ backgroundColor: item.name }"></div>
                           </div>
                           </FormItem>
                         
                       </Col>
                       <Col span="6">
                           <FormItem label="婚礼策划:" prop="planner_id">
                           <Select
                               v-model="formValidate.planner_id"
                               clearable
                               filterable
                           
                               placeholder="请选择婚礼策划"
                           >
                               <Option
                                   v-for="(item, index) in wedding_planner_list"
                                   :value="item.id"
                                   :key="item.id"
                               >{{ item.user_name }}</Option
                               >
                           </Select>
                           </FormItem>
                       </Col>
                       <Col span="6">
                           <FormItem label="四大人员" prop="">
                           <Select
                               v-model="formValidate.professionals"
                               clearable
                               filterable
                               multiple
                               placeholder="请选择婚礼人员"
                           >
                           <Option
                               v-for="(item, index) in professionals_list"
                               :value="item.id"
                               :label="item.user_name"
                               :key="item.id"
                               >
                               <!-- 自定义选项内容，显示头像和姓名 -->
                               <div style="display: flex; align-items: center;">
                                   <img
                                   :src="item.avatar_url"
                                   alt="头像"
                                   style="width: 24px; height: 24px; border-radius: 50%; margin-right: 8px;"
                                   />
                                   <span>{{ item.user_name }}  【{{item.type_text}}】</span>
                               </div>
                               </Option>
                            >
                           </Select>
                           </FormItem>
                       </Col>
                   </Col>
                   <Col span="24">
                       <FormItem label="是否新品：">
                           <i-switch v-model="formValidate.is_new" :true-value="1" :false-value="0" size="large">
                               <span slot="open">是</span>
                               <span slot="close">否</span>
                           </i-switch>
                       </FormItem>
                       <FormItem label="是否热门：">
                           <i-switch v-model="formValidate.is_hot" :true-value="1" :false-value="0" size="large">
                               <span slot="open">是</span>
                               <span slot="close">否</span>
                           </i-switch>
                       </FormItem>
                   </Col>
                   <Col span="24">
                       <FormItem label="排序" prop="sort">
                           <Input
                               v-model="formValidate.sort"
                               v-width="'50%'"
                               type = 'number'
                           />
                       </FormItem>
                   </Col>
               </Row>
                <!-- 案例详情 -->
               <Row v-show="currentTab === '2'" class="mb10">
                   <Col span="16">
                       <wangeditor
                           style="width: 100%"
                           :content="details"
                           @editorContent="getEditorContent"
                       ></wangeditor>
                   </Col>
                   <Col span="6" style="width: 33%">
                       <div class="ifam">
                       <div class="content" v-html="content"></div>
                       </div>
                   </Col>
               </Row>
           </Form>
           <Modal
               v-model="modalPic"
               width="960px"
               scrollable
               footer-hide
               closable
               title="上传案例图"
               :mask-closable="false"
               :z-index="8"
           >
               <uploadPictures
                   :isChoice="isChoice"
                   @getPic="getPic"
                   @getPicD="getPicD"
                   :gridBtn="gridBtn"
                   :gridPic="gridPic"
                   v-if="modalPic"
               ></uploadPictures>
           </Modal>
       </Card>
       <Card :bordered="false" dis-hover class="fixed-card" style="text-align:center">
           <Form>
               <FormItem>
                   <Button  v-if="currentTab == '2'" style="margin-right:10px" @click="upTab">上一步</Button>
                   <Button
                       type="primary"
                       class="submission"
                       v-if="currentTab == '1'"
                       @click="downTab('formValidate')"
                   >下一步</Button
                   >
                   <Button
                       type="primary"
                       :disabled="openSubimit"
                       class="submission"
                       @click="handleSubmit('formValidate')"
                       v-if="currentTab == '2'"
                   >保存</Button
                   >
               </FormItem>
           </Form>
       </Card>
    </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import Setting from "@/setting";
import util from "@/libs/util";
import uploadPictures from "@/components/uploadPictures";
import wangeditor from "@/components/wangEditor/index.vue";
import { cityApi } from '@/api/store';
import { getCasesConfig,getCasesDetail,casesSave,casesCreate} from '@/api/cases';

export default {
name: "marketing_add_cases",
components:{
   uploadPictures,wangeditor
},
props: {
       psInfo: Object
   },
 data() {
   return {
       roterPre: Setting.roterPre,
       currentTab: "1",
       modalPic: false,
       tableIndex: 0,
       isChoice: "",
       picTit: "",
       addresData: [],
       openSubimit:false,
       gridPic: {
           xl: 6,
           lg: 8,
           md: 12,
           sm: 12,
           xs: 12,
       },
      gridBtn: {
           xl: 4,
           lg: 8,
           md: 8,
           sm: 8,
           xs: 8,
       },
       formValidate:{
           title:'',
           description:'',
           cover_image:"",
           share_img:'',
           carousel_images : [],
           is_video : 0,
           video_url:'',
           address :'',
           wedding_date:'',
           total_price : '',
           province:"",
           city:'',
           area:'',
           color_id:[],
           color:[],
           env_id:0,
           style_id:'',
           price_id : 0,
           planner_id:0,
           is_new:1,
           is_hot:0,
           professionals:[],
           selectAddress:[],
           sort : 0
       },
       addressSelect: [],
       planner_list:[],
       professionals_list:[],
       details: "",
       content:'',
       headTab: [
           { title: "基础信息", name: "1" },
           { title: "案例详情", name: "2" }
       ],
       ruleValidate: {
           
     
           title: [
               { required: true, message: "请输入案例标题", trigger: "blur" },
           ],   
           cover_image: [
               { required: true, message: "请商品案例封面", trigger: "blur" },
           ],  
           share_img: [
               { required: true, message: "请商品案例分享图片", trigger: "blur" },
           ],  
           carousel_images: [
               { required: true,  type:"array",message: "请上传案例轮播图", trigger: "blur" },
           ],  
           address: [
               { required: true, message: "地址不得为空", trigger: "blur" },
           ], 
           wedding_date: [
               { required: true,type:"string", message: "婚礼时间不得为空", trigger: "blur" },
           ], 
           total_price: [
               { required: true, message: "婚礼价格不得为空", trigger: "blur" },
           ],
           planner_id: [
               { required: true,type:"number", message: "婚礼策划人员不得为空", trigger: "change" },
           ], 
           color_id: [
               { required: true, type:"array",message: "颜色主题不得为空", trigger: "change" },
           ],  
           env_id: [
               { required: true, type:"number",message: "环境不得为空", trigger: "change" },
           ], 
           style_id: [
               { required: true, type:"number",message: "风格选项不得为空", trigger: "change" },
           ], 
           price_id: [
               { required: true,type:"number", message: "价格选项不得为空", trigger: "change" },
           ],

           
     },
     images:[],
     fileUrl: Setting.apiBaseURL + "/file/upload",
     fileUrl2: Setting.apiBaseURL + "/file/video_upload",
     baseURL: Setting.apiBaseURL.replace(/adminapi/, ''),
     wedding_color_list:[],
     wedding_env_list:[],
     wedding_price_list:[],
     wedding_style_list:[],
     wedding_planner_list:[]
   };
 },
 computed: {
   ...mapState("admin/layout", ["isMobile","menuCollapse"]),
   labelWidth() {
     return this.isMobile ? undefined : 120;
   },
   labelPosition() {
     return this.isMobile ? "top" : "right";
   },
   labelBottom() {
     return this.isMobile ? undefined : 15;
   },
 },

   mounted(){
       if ((this.$route.params.id !== "0" && this.$route.params.id) ) {
           this.getInfo();
       } 
   },
 created () {
       getCasesConfig().then(res=>{
           this.wedding_color_list = res.data.wedding_color
           this.wedding_env_list   = res.data.wedding_env
           this.wedding_price_list = res.data.wedding_price
           this.wedding_style_list = res.data.wedding_style
           this.wedding_planner_list = res.data.planner_list
           this.professionals_list = res.data.professionals_list
       })
       this.cityInfo({ pid: 0 });
       if (this.psInfo.province) {
           // this.addressSelect.push(this.psInfo.province);
           this.formValidate.selectAddress.push(this.psInfo.province);
       }
       if (this.psInfo.city) {
           // this.addressSelect.push(this.psInfo.city);
           this.formValidate.selectAddress.push(this.psInfo.city);
       }
       if (this.psInfo.area) {
           // this.addressSelect.push(this.psInfo.area);
           this.formValidate.selectAddress.push(this.psInfo.area);
       }
       if (this.psInfo.street) {
           this.formValidate.selectAddress.push(this.psInfo.street);
           // this.addressSelect.push(this.psInfo.street);
       }
   },
   watch: {
       psInfo: {
         handler(value) {
           this.formData.province = value.province;
           this.formData.city = value.city;
           this.formData.area = value.area;
         },
         immediate: true
       }
   },
 methods: {

       select_color(newValue) {
           const colorId = newValue.value;  // 获取选择的颜色 ID

           // 查找 wedding_color_list 中对应的颜色
           const selectedColor = this.wedding_color_list.find(item => item.id === colorId);
           
           if (selectedColor) {
             
               // 判断该颜色是否已经在 formValidate.color 中
               const colorIndex = this.formValidate.color.findIndex(item => item.color_id === selectedColor.id);
            
               const colorIdIndex = this.formValidate.color_id.indexOf(selectedColor.id);
            
               if (colorIndex === -1) {
                   // 如果颜色对象不存在，则添加新的颜色对象到 formValidate.color
                   this.formValidate.color.push({ color_id: selectedColor.id, name: selectedColor.name });

                   // 同时将颜色 ID 添加到 color_id 数组
                   if (colorIdIndex === -1) {
                       this.formValidate.color_id.push(selectedColor.id);
                   }
               } else {
                   // 如果颜色对象已经存在，则删除颜色对象
                   this.formValidate.color.splice(colorIndex, 1);

                   // 同时从 color_id 数组中删除对应的颜色 ID
                   if (colorIdIndex !== -1) {
                       this.formValidate.color_id.splice(colorIdIndex, 1);
                   }
               }
           }
      
       },
   
       getInfo(){
           getCasesDetail(this.$route.params.id).then(res=>{
               this.formValidate = res.data
               this.details = res.data.details
               if(res.data.color.length > 0){
                   this.formValidate.color_id = res.data.color.map(item=>{
                       return item.color_id
                   })
               }
           })
       },
       upTab() {
           if( (Number(this.currentTab)) > 1){
               this.currentTab = (Number(this.currentTab) - 1).toString();
           }
          
       },
         // 下一页；
       downTab(name) {
       this.$refs[name].validate((valid) => {
           if (valid) {
               this.currentTab = (Number(this.currentTab) + 1).toString();
           }else{
               this.$Message.warning("请完善数据");
           }
       })
       },
        // 省市区数据
        cityInfo(data){
           cityApi(data).then(res=>{
               this.addresData = res.data
           })
       },
       loadData(item, callback) {
           item.loading = true;
           cityApi({pid:item.value}).then(res=>{
               item.children = res.data;
               item.loading = false;
               callback();
           });
       },
       addchack(e,selectedData){
           e.forEach((i,index)=>{
               if(index==0){
                   this.formData.province = i
               }else if(index==1){
                   this.formData.city = i
               }else if(index==2){
                   this.formData.area = i
               }else {
                   this.formData.street = i
               }
           })
       },
      // tab切换
      onhangeTab(name) {
           this.currentTab = name;
      },
      handleRemove(i) {
           this.formValidate.carousel_images.splice(i, 1);
       },
       // 关闭图片上传模态框
       changeCancel(msg) {
            this.modalPic = false;
       },
      modalPicTap(tit, picTit, index) {
           this.modalPic = true;
           this.isChoice = tit === "dan" ? "单选" : "多选";
           this.picTit = picTit;
           this.tableIndex = index;
           
     },
       // 获取单张图片信息
       getPic(pc) {
       switch (this.picTit) {
           case "danFrom":
           this.formValidate.image = pc.att_dir;
           if (!this.$route.params.id) {
               if (this.formValidate.spec_type === 0) {
               this.oneFormValidate[0].pic = pc.att_dir;
               } else {
               this.manyFormValidate.map((item) => {
                   item.pic = pc.att_dir;
               });
               this.oneFormBatch[0].pic = pc.att_dir;
               }
           }
           break;
           case "danTable":
           this.oneFormValidate[this.tableIndex].pic = pc.att_dir;
           break;
           case "duopi":
           this.oneFormBatch[this.tableIndex].pic = pc.att_dir;
           break;
           case "cover_image":
           this.formValidate.cover_image = pc.att_dir;
           break;
           case "share_img":
           this.formValidate.share_img = pc.att_dir;
           break;
           case "video":
           this.formValidate.video_url = pc.att_dir;
           break;
           default:
           this.manyFormValidate[this.tableIndex].pic = pc.att_dir;
       }
       this.modalPic = false;
       },
       // 获取多张图信息
       getPicD(pc) {
           this.images = pc;
           this.images.map((item) => {
               this.formValidate.carousel_images.push(item.att_dir);
               this.formValidate.carousel_images = this.formValidate.carousel_images.splice(
                   0,
                   10
               );
           });
           this.modalPic = false;
       },
       changeTemplate(msg) {
           this.template = msg;
       },
       // 表单验证
       validate(prop, status, error) {
       if (status === false) {
           this.$Message.warning(error);
       }
       },
       // 移动
       handleDragStart(e, item) {
           this.dragging = item;
       },
       handleDragEnd(e, item) {
           this.dragging = null;
       },
       handleDragOver(e) {
        e.dataTransfer.dropEffect = "move";
       },
       handleDragEnter(e, item) {
           e.dataTransfer.effectAllowed = "move";
           if (item === this.dragging) {
               return;
           }
           const newItems = [...this.formValidate.carousel_images];
           const src = newItems.indexOf(this.dragging);
           const dst = newItems.indexOf(item);
           newItems.splice(dst, 0, ...newItems.splice(src, 1));
           this.formValidate.carousel_images = newItems;
       },
        // 删除视频；
       delVideo() {
           let that = this;
           that.$set(that.formValidate, "video_url", "");
           that.$set(that, "progress", 0);
           that.videoIng = false;
           that.upload.videoIng = false;
           that.$refs.refid.value ='';
       },
       getEditorContent(data) {
           this.content = data;
       },
       onchangeTime(e) {
           this.formValidate.wedding_date = e;
       },
       handleSubmit(name) {
        this.formValidate.details = this.content
           this.$refs[name].validate((valid) => {
               if(this.$route.params.id){
                casesSave(this.$route.params.id,this.formValidate).then(res=>{
                    this.$Message.success(res.msg);
                    setTimeout(() => {
                        this.$router.push({ path: this.roterPre + "/marketing/cases" });
                    }, 500);
                })
               }else{
                casesCreate(this.formValidate).then(res=>{
                    this.$Message.success(res.msg);
                    setTimeout(() => {
                        this.$router.push({ path: this.roterPre + "/marketing/cases" });
                    }, 500);
                })
               }
           })
       }
 }
};
</script>
<style scoped lang="stylus">
.input-display {
 display: none
}
.pictrueBox {
 display: inline-block;
}

.pictrueTab {
 width: 40px !important;
 height: 40px !important;
}

.pictrue {
 width: 60px;
 height: 60px;
 border: 1px dotted rgba(0, 0, 0, 0.1);
 margin-right: 15px;
 margin-bottom 10px;
 display: inline-block;
 position: relative;
 cursor: pointer;

 img {
   width: 100%;
   height: 100%;
 }

 .btndel {
   position: absolute;
   z-index: 1;
   width: 20px !important;
   height: 20px !important;
   left: 46px;
   top: -4px;
 }
}
.upLoad {
 width: 58px;
 height: 58px;
 line-height: 58px;
 border: 1px dotted rgba(0, 0, 0, 0.1);
 border-radius: 4px;
 background: rgba(0, 0, 0, 0.02);
 cursor: pointer;
}
.iview-video-style {
   width: 40%;
   height: 350px;
   border-radius: 10px;
   background-color: #707070;
   margin-top: 10px;
   position: relative;
   overflow: hidden;
 }
 
 .iview-video-style .iconv {
   color: #fff;
   line-height: 180px;
   width: 50px;
   height: 50px;
   display: inherit;
   font-size: 26px;
   position: absolute;
   top: -74px;
   left: 50%;
   margin-left: -25px;
 }
 
 .iview-video-style .mark {
   position: absolute;
   width: 100%;
   height: 30px;
   top: 0;
   background-color: rgba(0, 0, 0, 0.5);
   text-align: center;
 }
 
 .uploadVideo {
   margin-left: 10px;
 }
 .video-style {
   width: 100%;
   height: 100% !important;
   border-radius: 10px;
 }
 .ifam {
   width: 344px;
   height: 644px;
   background: url('../../../assets/images/phonebg.png') no-repeat center top;
   background-size: 344px 644px;
   padding: 40px 20px;
   padding-top: 50px;
   margin: 0 auto 0 20px;
 
   .content {
     height: 560px;
     overflow: hidden;
     scrollbar-width: none; /* firefox */
     -ms-overflow-style: none; /* IE 10+ */
     overflow-x: hidden;
     overflow-y: auto;
   }
 
   .content::-webkit-scrollbar {
     display: none; /* Chrome Safari */
   }
 }
</style>